<template>
	<view class="wrap">
		<!-- 取还车地点 -->
		<view class="addressBox">
			<view class="topTip">
				<text>取还车地点</text>
			</view>
			<view class="contentTip">
				<text @tap="showStore = true">{{currentStore.storeName}}</text>
			</view>
		</view>
		<u-line color="#CECECE"></u-line>
		<!-- 租赁时间 -->
		<view>
			<view class="topTip">
				<text>取车时间</text>
				<text>租期</text>
			</view>

			<view class="contentTip">
				<text @click.stop="showTimeAlert=true">{{takeTime}}</text>
				<text @click.stop="showTenancyAlert=true">{{tenancyTerm}}个月</text>
			</view>
		</view>

		<!-- 立即选车 -->
		<view class="chooseCarBtn" @tap="goOrder">
			立即订车
		</view>

       <u-picker :show="showStore" :columns="storeList" keyName="storeName" closeOnClickOverlay
       	@close="showStore=false" @cancel="showStore=false" title="选择取还车地点" @confirm="confimStore">
       </u-picker>

		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showTimeAlert"
			@close="showTimeAlert=false" @cancel="showTimeAlert=false" :formatter="formatter" mode="date" title="取车时间"
			@confirm="confimTime"></u-datetime-picker>

		<u-picker :show="showTenancyAlert" :columns="columns" keyName="label" closeOnClickOverlay
			@close="showTenancyAlert=false" @cancel="showTenancyAlert=false" title="选择租期" @confirm="confimTenancy">
		</u-picker>
	</view>
</template>

<script>
	import {
		longStoreInfo
	} from '@/api/longOrder-api.js'
	var moment = require('@/utils/moment.js');
	moment.locale('zh-cn');
	export default {
		data() {
			return {
				showTimeAlert: false,
				showTenancyAlert: false,
				// currentDate: Number(new Date()),
				currentDate: moment(this.startTime),
				currentIndex: 0,
				columns: [
					[{
							label: '1个月',
							value: 1
						},
						{
							label: '2个月',
							value: 2
						},
						{
							label: '3个月',
							value: 3
						},
						{
							label: '4个月',
							value: 4
						},
						{
							label: '5个月',
							value: 5
						},
						{
							label: '6个月',
							value: 6
						},
						{
							label: '7个月',
							value: 7
						},
						{
							label: '8个月',
							value: 8
						},
						{
							label: '9个月',
							value: 9
						},
						{
							label: '10个月',
							value: 10
						},
						{
							label: '11个月',
							value: 11
						},
						{
							label: '12个月',
							value: 12
						}
					]
				],
				storeInfo: {},
				
				
				showStore: false,
				index : 0
			}
		},
		mounted() {
		
			
		},
		props: {
			businessNo: {
				type: Number,
				default: 1
			},
			carInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			activityId: {
				type: String,
				default: ''
			},
		},
		computed: {
			startTime() {
				return this.$store.state.order.lStartTime;
			},
			takeTime() {
				return moment(this.startTime).format("MM月DD日");
			},
			tenancyTerm() {
				return this.$store.state.order.lTenancyTerm;
			},
			endTime() {
				let endTime = moment(this.startTime).add(this.tenancyTerm, "month").format("YYYY-MM-DD");
				return endTime;
			},
			isLogin() {
				return this.$store.state.user.isLogin;
			},
			storeList() {
				return [this.carInfo.storeList];
			},
			currentStore() {
				return this.carInfo.storeList[this.index];
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		methods: {

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 选择门店
			confimStore(e) {
				// this.currentStore = e.value[0];
				this.index = e.indexs[0];
				this.showStore = false;
			},

			//取车时间确定
			confimTime(e) {
				var time = moment(e.value).format('YYYY-MM-DD')
				this.$store.commit('order/savelStartTime', time);
				this.showTimeAlert = false;
			},
			//租期确定
			confimTenancy(e) {
				let tenancyTerm = e.value[0].value;
				this.$store.commit('order/savelTenancyTerm', tenancyTerm);
				this.showTenancyAlert = false;
			},
			
			//下单
			goOrder() {
				if(this.isLogin) {
					if (!this.$u.test.isEmpty(this.currentStore.storeId)) {
						let data = {
							planId: this.carInfo.planId,
							carUrl: this.carInfo.modelUrl,
							businessNo: this.businessNo,
							storeId: this.currentStore.storeId,
							storeName: this.currentStore.storeName,
							activityId: this.activityId,
							startTime : this.startTime,
							tenancyTerm : this.tenancyTerm,
							rentAmount : this.carInfo.modelPresentPrice,
						};
					
						let params = uni.$u.queryParams(data, true, 'indices');
						uni.navigateTo({
							url: '/pagesA/order/activityCar-addLongOrder' + params
						})
					
					} else {
						this.$u.toast('请选择取还车门店');
					}
				}else {
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		top: 10upx;
		background-color: $bg-white-color;
		display: flex;
		flex-direction: column;
		border-radius: 16upx;
		padding: 20upx 50upx;
	}

	.addressBox {
		margin-bottom: 20upx;
	}

	.topTip {
		padding-top: 10upx;
		position: relative;

		text {
			color: $text-color-99;
			font-size: 24upx;
		}

		text:nth-child(2) {
			position: absolute;
			left: 200upx;
			top: 18upx;

		}

	}

	.contentTip {
		padding-top: 10upx;
		position: relative;
		margin-bottom: 35upx;

		text {
			color: $text-color-33;
			font-size: 30upx;
			font-weight: bold;
		}

		text:nth-child(2) {
			position: absolute;
			left: 200upx;


		}

	}

	.chooseCarBtn {
		margin: 10upx 0;
		width: 100%;
		height: 88upx;
		background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
		color: $bg-white-color;
		line-height: 88upx;
		text-align: center;
		border-radius: 10upx;
	}

	.myOrder {
		display: flex;
		justify-content: space-between;
		color: $text-color-33;
		font-size: 26upx;
		padding: 10upx 0;
	}

	.alertWrapper {
		background-color: $bg-white-color;
	}

	.topBar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100upx;

		text {
			color: $text-color-99;
			font-size: 28upx;
			font-weight: bold;
		}

		text:nth-child(2) {
			font-size: 32upx;
			color: $text-color-33;
		}

		text:nth-child(3) {
			color: $main-color;
		}
	}

	.timeBar {
		margin-top: 10upx;
		background-color: #E7E7E7;
		display: flex;

		text {
			display: inline-block;
			height: 80upx;
			line-height: 80upx;
			width: 50%;
			text-align: center;
			font-size: 26upx;
			color: $text-color-33;

			&.active1 {
				background-color: $main-color;
				color: $text-color-ff;
			}

			&.active2 {
				background-color: $main-color;
				color: $text-color-ff;
			}

		}
	}
</style>
